<template>
  <div id="app">
    <list :list="testList">
      <template slot-scope="scope">
        <button @click="testBtn(scope)">测试按钮</button>
        <button @click="testBtn2(scope)">测试按钮2</button>
      </template>
    </list>
    <!-- <childA>
      <h1 slot="red"><h2 >红色的</h2></h1>
    </childA>
    <childB/> -->
  </div>
</template>

<script>
import childA from './components/childA'
import childB from './components/childB'
import list from './components/list'
export default {
  data () {
    return {
      testList: [
        {id: 1, name: '孙悟空'},
        {id: 2, name: '猪八戒'},
        {id: 3, name: '沙和尚'},
        {id: 4, name: '唐僧'},
        {id: 5, name: '小白龙'}
      ]
    }
  },
  methods: {
    testBtn (scope) {
      console.log('测试按钮1')
      console.log(scope.data)
    },
    testBtn2 (scope) {
      console.log('测试按钮2')
      console.log(scope.data)
    }
  },
  name: 'App',
  components: { childA, childB, list }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
